<script setup>
import { defineEmits, defineProps, ref } from 'vue'
import { editAttendance, getAttendanceApplyApi } from '@/api/attendance'
import { getUserProfile } from '@/api/system/user'
import { onLoad } from '@dcloudio/uni-app'

const props = defineProps({
  content: String,
  punchTime: String,
  type: String,
  description: String,
  showUpdateButton: { type: Boolean, default: true },
  updateParams: Object,
  punchEdit: Boolean,
})

const emits = defineEmits(['updateAttendance'])

const popUpText = ref('')

const dialogConfirm = () => {
  editAttendance(props.updateParams)
  emits('updateAttendance')
}

const dialogClose = () => {
  console.log('dialogClose')
}

const alertDialog = ref(null)
const profile = ref(null)
const frequency = ref(0)
const updateAttendance = (type) => {
  if (type === '正常') {
    popUpText.value =
      '更新打卡后，打卡记录将由“' + props.content + ' ' + props.punchTime + '”更新成为最新打卡时间'
    alertDialog.value.open()
  } else if (type === '迟到' || type === '缺卡') {
    if (frequency.value < 4) {
      uni.navigateTo({
        url: '/pages/audit/attendance/replacementCard',
      })
    } else {
      uni.showToast({
        title: '您本月的补卡次数上限！',
        icon: 'none',
      })
    }
  }
}

const getUserInfo = async () => {
  profile.value = (await getUserProfile()).data
}
const getAttendanceApplyApiFn = async (userId) => {
  let params = {
    userId: userId,
  }
  let { code, data } = await getAttendanceApplyApi(params)
  if (code === 200) {
    frequency.value = data
  }
}
onLoad(async () => {
  await getUserInfo()
  await getAttendanceApplyApiFn(profile.value.userId)
})
</script>

<template>
  <view class="container">
    <uni-card :border="false" :is-shadow="false" margin="0" padding="0" spacing="0">
      <view class="smallCard">
        <text class="textClass">{{ props.content }}</text>
        <text class="textClass">{{ props.punchTime }}</text>
        <p :class="props.type">{{ props.type }}</p>
        <span style="flex-grow: 1"></span>
        <text
          v-if="props.showUpdateButton && props.type === '正常' && props.punchEdit"
          class="buttonClass"
          @tap="updateAttendance(props.type)"
          >更新打卡
        </text>
        <text
          v-if="props.showUpdateButton && props.type === '迟到' "
          class="buttonClass"
          @tap="updateAttendance(props.type)"
          >处理异常
        </text>
        <text
          v-if="props.showUpdateButton && props.type === '缺卡' "
          class="buttonClass"
          @tap="updateAttendance(props.type)"
          >处理异常
        </text>
      </view>
      <text class="description">{{ props.description }}</text>
    </uni-card>
  </view>
  <uni-popup ref="alertDialog" type="dialog">
    <uni-popup-dialog
      :content="popUpText"
      cancelText="取消"
      confirmText="确定"
      title="确定更新打卡吗？"
      type="dialog"
      @close="dialogClose"
      @confirm="dialogConfirm"
    ></uni-popup-dialog>
  </uni-popup>
</template>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

p {
  width: 56rpx;
  height: 34rpx;
  justify-content: center;
  font-family: 'PingFang SC';
  font-size: 20rpx;
  font-style: normal;
  font-weight: 500;
  padding: 3rpx 8rpx;
  border-radius: 4rpx;
}

.container {
  display: flex;
  align-items: center;
  width: 618rpx;
  //min-height: 110rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx 0 #0000000d;
  padding: 32rpx 32rpx;
  margin: 16rpx 0rpx;
  background-color: #ffffff;
}

.description {
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  padding: 0rpx 0rpx;
}

.smallCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.textClass {
  color: #1d2129;
  font-family: 'PingFang SC';
  font-size: 34rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 47.6rpx;
  margin-right: 16rpx;
}

.buttonClass {
  color: #165dff;
  height: 34rpx;
  flex: 1 0 0;
  text-align: right;
  font-family: 'PingFang SC';
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6rpx;
}
</style>
